<template>
	<el-breadcrumb separator="/">
		<el-breadcrumb-item :to="{ path: '/' }">统计数据管理</el-breadcrumb-item>
		<el-breadcrumb-item><a href="/">Aqi空气质量指数级别分布</a></el-breadcrumb-item>
	</el-breadcrumb>
	<div class="title">
		Aqi空气质量指数级别分布
	</div>
	<el-table :data="aqiLevel" height="450" style="width: 100%">
		<el-table-column prop="aqiId" label="AQI指数等级" width="400" />
		<el-table-column prop="aqiExplain" label="AQI指数等级描述" width="400" />
		<el-table-column prop="aqiSum" label="AQI指数等级分布统计" width="400" />
	</el-table>
</template>

<script setup>
	import {
		inject
	} from 'vue';
	import {
		useRouter
	} from 'vue-router';
	import {
		reactive,
		ref
	} from 'vue';
	const router = useRouter();
	const axios = inject("axios");
	const aqiLevel = ref([]);

	function loadData() {
		let url = "/api/statistic/aqiLevel";
		axios.get(url).then((r) => {
			if (r.data.ok) {
				aqiLevel.value = r.data.data.aqiLevelVO;
			}
		})
	}
	loadData();
</script>

<style>
	.title {
		background-color: #67c23a;
		width: 80%;
		height: 30px;
		border-radius: 5px;
		font-size: 13px;
		font-weight: 700;
		color: white;
		padding: 10px 30px 0px 20px;
		margin-top: 20px;
		margin-bottom: 20px;
	}
</style>